import editorStore from "@/editorComponent/editorStore";
import utils from "@/utils/utils";
import { DownOutlined, RightOutlined } from "@ant-design/icons";
import { get } from 'lodash';
import { autorun } from "mobx";
import { Fragment, useEffect, useState } from "react";
import styles from "./goodsShowDetail.module.less";
import { GoodsData } from "#/type";
import GoodsModal from "../GoodsModal/GoodsModal";
import goodsModalStore from "../GoodsModal/goodsModalStore";
import GoodsDetailModal from "../GoodsDetailModal/GoodsDetailModal";
import goodsDetailModalStore from "../GoodsDetailModal/goodsDetailModalStore";


function GoodsShowDetail() {
  const [goodsData, setGoodsData] = useState<GoodsData>();
  const [sizeList, setSizeList] = useState<Array<any>>([]);
  const [show, setShow] = useState(false);
  const [selectGoodsModalOpen, setSelectGoodsModalOpen] = useState(false);

  useEffect(() => autorun(() => {
    const { goodsData } = editorStore;
    const { size = [] } = goodsData || {};
    const enableSize: any = size?.filter((item: any) => item.enable) || [];
    setSizeList(enableSize);
    setGoodsData(goodsData);
  }), []);

  return (
    <div className={styles.goodsShowDetail}>

      {/* 商品详情 */}
      <GoodsDetailModal />

      {/* 商品弹窗 */}
      <GoodsModal />

      <div className={styles.chioceBox}>
        <div className={styles.button}
          onClick={() => {
            goodsModalStore.setOpen(true);
          }}>
          {"切换产品 >"}
        </div>
      </div>
      {
        goodsData ? <Fragment>
          <div className={styles.pr20}>
            <div className={styles.rowInfo}>
              <div className={styles.productImg}>
                <img src={utils.ossSuffix(get(goodsData, 'thumbs[0]'), 120)} />
              </div>
              <div className={styles.ml12}>
                <div className={styles.name}>
                  {get(goodsData, 'name')}
                </div>
                <div className={styles.price}>
                  ¥  {goodsData.price / 100}
                </div>
                <div className={styles.checkDetail} onClick={() => {
                  goodsDetailModalStore.setGoodsData(goodsData);
                }}>
                  产品详情<RightOutlined />
                </div>
              </div>
            </div>
            {/* <div className={styles.rowSize}>
              <div className={styles.title}>
                <span>尺码</span>
                <DownOutlined style={{ fontSize: 12, marginLeft: 4 }} />
              </div>
              <div className={styles.sizeList}>
                {
                  sizeList.map(({ name }, i: number) => <div key={i} className={styles.sizeItem}>
                    {name}
                  </div>)
                }
              </div>
            </div> */}
            <div className={styles.rowColor}>
            </div>
          </div>
        </Fragment> : ''
      }
    </div>
  )
}


export default GoodsShowDetail
